<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select id="province">
        <!-- <option value="">请选择</option> -->
        <!-- <option value=""></option> -->
    </select>
    <select id="city">
        <!-- <option value="">请选择</option> -->
        <!-- <option value=""></option> -->
    </select>
    <select id="area">
        <!-- <option value="">请选择</option> -->
        <!-- <option value=""></option> -->
    </select>

    <script src="../js/city.js"></script>
    <script>

        // 渲染省市区的函数封装
        // 封装函数以后 --- 变量的作用域
        // 多测试 (直辖市  请选择)


        let oPro = document.querySelector('#province');
        let oCity = document.querySelector('#city');
        let oArea = document.querySelector('#area');


        // 拿到数据第一件事件就是打印
        console.log(data);

        let dataArr = data.list;  // 数组
        let cityArr;
        let areaArr;

        // 渲染省份
        render(dataArr, oPro);

        // 省份选中以后，渲染市
        oPro.addEventListener('change', function () {
            // 获取省份
            let proVal = this.value;
            if (!proVal) {
                oCity.innerHTML = '<option value="">请选择</option>';
                oArea.innerHTML = '<option value="">请选择</option>';
                return;
            }
            console.log(proVal);
            // 找到省对应的市
            cityArr = dataArr.filter(function (item) {
                return item.name === proVal;
            })[0].list;
            console.log(cityArr);
            render(cityArr, oCity);
            oArea.innerHTML = '<option value="">请选择</option>';
        })

        // 市选中以后，渲染区
        oCity.addEventListener('change', function () {
            let cityVal = this.value;
            if (!cityVal) {   // 选的是请选择  value=""
                // if(cityVal === '请选择')
                oArea.innerHTML = '<option value="">请选择</option>';
                return;
            }
            // 找到市对应的区
            areaArr = cityArr.filter(function (item) {
                return item.name === cityVal;
            })[0].list;

            console.log(areaArr);
            // 判断判断是否是直辖市
            if (areaArr) {
                oArea.style.display = 'inline-block';
                render(areaArr, oArea);

            } else {
                oArea.style.display = 'none';
            }
        })


        // function renderCity() {
        //     // 渲染省份
        //     let proHTML = '<option value="">请选择</option>';
        //     // 遍历省份
        //     cityArr.forEach(function (item) {   // item 是数组的值 -- 是一个对象   
        //         proHTML += `<option value="${item.name}">${item.name}</option>`
        //     })
        //     // 赋值到页面中
        //     oCity.innerHTML = proHTML;
        // }



        function render(arr, ele) {
            // 渲染省份
            let proHTML = '<option value="">请选择</option>';
            // 遍历省份
            arr.forEach(function (item) {   // item 是数组的值 -- 是一个对象   
                proHTML += `<option value="${item.name}">${item.name}</option>`
            })
            // 赋值到页面中
            ele.innerHTML = proHTML;
        }


    </script>

</body>

</html>